<template>
	<view class="root">
		<radio-group class="cards mt-20" @change="changeRadio">
			<uni-swipe-action>
				<uni-swipe-action-item
					:right-options="options"
					v-for="(card, index) in bankCards"
					:key="index"
					@click="operation(index, $event)"
				>
					<view
						class="card br-10 color-fff"
						:style="{
							backgroundImage: `linear-gradient(to right, ${
								card.colors.length
									? card.colors.join(',')
									: '#7584f7, #22b5ff'
							})`,
						}"
					>
						<view class="fd-row">
							<image
								class="bgc-fff width-48 height-48 br-circle"
								:src="card.bank_logo"
								mode="aspectFit"
							/>
							<view class="ml-26 f1 jc-sa">
								<text class="fs-28">{{ card.bank_name }}</text>
								<text class="fs-20">储蓄卡</text>
							</view>
							<label>
								<radio
									:value="String(card.card_id)"
									:checked="Boolean(card.is_default)"
									color="#fff"
								/>
								<text class="fs-24">设为默认</text>
							</label>
						</view>

						<text class="ml-100 fs-30 mt-60">
							{{ card.bank_number }}
						</text>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</radio-group>

		<text
			v-if="!bankCards.length"
			class="color-666 fs-26 mt-30 pl-30 pr-30 text-center"
		>
			暂无已绑定银行卡
		</text>
	</view>
</template>

<script lang="ts">
	import Vue from "vue";
	import Component from "vue-class-component";
	import uniSwipeActionItem from "@/components/uni-swipe-action-item/uni-swipe-action-item.vue";

	@Component({ components: { uniSwipeActionItem } })
	export default class myBankCard extends Vue {
		// component property

		options: AnyObject[] = [
			{
				text: "取消",
				style: {
					backgroundColor: "#007aff",
				},
			},
			{
				text: "删除",
				style: {
					backgroundColor: "#dd524d",
				},
			},
		];

		bankCards: AnyObject[] = [];
		onNavigationBarButtonTap(e: AnyObject) {
			if (e.float !== "right") return;
			uni.navigateTo({ url: "/pages/income/addBankCard" });
		}

		onShow() {
			this.getList();
		}

		getList() {
			this.request.get("/employee/bankList").then(({ data }) => {
				this.bankCards = data;
			});
		}

		operation(index: number, e: AnyObject) {
			if (!e.index) return;

			this.request
				.get("/employee/bankDelete", {
					card_id: this.bankCards[index].card_id,
				})
				.then(({ msg: title }) => {
					uni.showToast({ title, success: this.getList });
				});
		}

		changeRadio({ detail }: AnyObject) {
			this.request.get("/employee/setBankDefault", {
				card_id: detail.value,
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	.root {
		.card {
			margin: 12rpx 30rpx;
			padding: 30rpx;
			// background-image: linear-gradient(to right, #7584f7, #22b5ff);
			image {
				padding: 12rpx;
			}

			::v-deep {
				radio {
					transform: scale(0.6);
					.wx-radio-input,
					.uni-radio-input {
						border: 1px solid #fff;
						background-color: transparent;
					}

					.wx-radio-input.wx-radio-input-checked,
					.uni-radio-input.uni-radio-input-checked {
						&::before {
							color: #7584f7;
							font-weight: 600;
							font-size: 22px;
						}
					}
				}
			}
		}
	}
</style>